<template>
  <div class="app-container">
    <el-card class="box-card">
      <div style="height:50px">
          <span class="red">目前仅支持学科和关键字查找</span>
          <button class="buttons" @click="new_questions">新增试题</button>
      </div>
      <el-form
        label-width="80px">
      <el-col :span="6">
        <el-form-item label="学科">
          <el-select
            style="display:block"
            v-model="subject"
            placeholder="请选择"
            @change="monitors">
            <el-option
              v-for="(itim, index) in subject_array"
              :key="index"
              :label="itim.label"
              :value="itim.value"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 二级目录 -->
      <el-col :span="6">
        <el-form-item label="二级目录">
          <el-select
            style="display:block"
            v-model="secondary_directory"
            placeholder="请选择">
            <el-option
              v-for="(itim, index) in er_arr"
              :key="index"
              :label="itim.label"
              :value="itim.index"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 标签 -->
      <el-col :span="6">
        <el-form-item label="标签">
          <el-select v-model="labels"
          placeholder="请选择"
          style="display:block">
            <el-option
              label="无数据"
              :disabled="btn"
              value="shanghai"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 关键字 -->
      <el-col :span="6">
        <el-form-item label="关键字">
          <el-input
            v-model="activity_form"
            placeholder="根据题干搜索"
          ></el-input>
        </el-form-item>
      </el-col>
        <!-- 试题类型 -->
      <el-col :span="6">
        <el-form-item label="试题类型">
          <el-select
          v-model="question_types"
          placeholder="请选择"
          style="display:block">
            <el-option label="单选" value="1"></el-option>
            <el-option label="多选" value="2"></el-option>
            <el-option label="简答" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 难度 -->
      <el-col :span="6">
        <el-form-item label="难度">
          <el-select
            style="display:block"
            v-model="difficulty"
            placeholder="请选择">
            <el-option label="简单" value="1"></el-option>
            <el-option label="一般" value="2"></el-option>
            <el-option label="困难" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 方向 -->
      <el-col :span="6">
        <el-form-item label="方向">
          <el-select
            style="display:block"
            v-model="direction"
            placeholder="请选择">
            <el-option
              v-for="(itim, index) in directions"
              :key="index"
              :label="itim"
              :value="itim"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 录入人 -->
      <el-col :span="6">
        <el-form-item label="录入人">
          <el-select
            style="display:block"
            v-model="entered_by"
            placeholder="请选择">
            <el-option label="超级管理员" value="2"></el-option>
            <el-option label="录入管理员" value="3"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
        <!-- 题目备注 -->
      <el-col :span="6">
        <el-form-item label="题目备注">
          <el-input v-model="topic_notes" ></el-input>
        </el-form-item>
      </el-col>
        <!-- 企业名称 -->
      <el-col :span="6">
        <el-form-item label="企业简称">
          <el-input
            v-model="name_of_enterprise">
          </el-input>
        </el-form-item>
      </el-col>
        <!-- 城市 -->
      <el-col :span="6">
        <el-form-item
        label="城市">
          <el-select
            style="width:50%"
            v-model="urban"
            placeholder="请选择"
            @change="change_fn">
            <el-option
              v-for="(itim, index) in urban_array"
              :key="index"
              :label="itim"
              :value="itim"
            ></el-option>
          </el-select>
          <el-select
            style="width:50%"
            v-model="area"
            placeholder="请选择">
            <el-option
              v-for="(itim, index) in area_array"
              :key="index"
              :label="itim"
              :value="itim"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="6">
        <el-form-item size="small" style="float:right">
          <el-button @click="removes">清空</el-button>
          <el-button type="primary" @click="search">搜索</el-button>
        </el-form-item>
      </el-col>
      </el-form>
      <!-- tab面板 -->
      <el-col :span="24">
      <button
        class="btn"
        :class="index == indexs ? 'blue' : ''"
        v-for="(itim, index) in tabname"
        :key="index"
        @click="change_class(index)">
        {{ itim }}
      </button>
      </el-col>
      <!-- 显示多少条 -->
      <el-col :span="24">
      <div class="mydiv">数据一共{{ total }}条</div>
      </el-col>
      <!-- 表格 -->
      <el-table :data="tabledata" max-height="100%">
        <!-- 试题编号 -->
        <el-table-column fixed prop="number" width="150" label="试题编号">
        </el-table-column>
        <!-- 学科 -->
        <el-table-column prop="subject" label="学科">
        </el-table-column>
        <!-- 目录 -->
        <el-table-column prop="catalog" label="目录">
        </el-table-column>
        <!-- 题型 -->
        <el-table-column prop="questionType" label="题型">
          <template slot-scope="scope">
            <span v-if="scope.row.questionType === '1'">单选</span>
            <span v-else-if="scope.row.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </template>
        </el-table-column>
        <!-- 提干 -->
        <el-table-column prop="question" width="280" label="题干">
          <template slot-scope="scope">
            <span v-html="scope.row.question"></span>
          </template>
        </el-table-column>
        <!-- 录入时间 -->
        <el-table-column prop="addDate" width="200" label="录入时间">
        </el-table-column>
        <!-- 难度 -->
        <el-table-column prop="difficulty" label="难度">
          <template slot-scope="scope">
            <span v-if="scope.row.difficulty === '1'">简单</span>
            <span v-else-if="scope.row.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </template>
        </el-table-column>
        <!-- 录入人 -->
        <el-table-column prop="creator" label="录入人" width="100px">
        </el-table-column>
        <!-- 审核状态 -->
        <el-table-column prop="chkState" label="审核状态">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState === 1">以审核</span>
            <span v-else-if="scope.row.chkState === 2">已拒绝</span>
            <span v-else>待审核</span>
          </template>
        </el-table-column>
        <!-- 审核意见 -->
        <el-table-column prop="chkRemarks" label="审核意见" width="150px">
        </el-table-column>
        <!-- 审核人 -->
        <el-table-column prop="chkUser" label="审核人" width="120">
        </el-table-column>
        <!-- 发布状态 -->
        <el-table-column prop="chkState" label="发布状态">
          <template slot-scope="scope">
            <span v-if="scope.row.chkState === 1">以发布</span>
            <span v-else-if="scope.row.chkState === 2">以拒绝</span>
            <span v-else>待发布</span>
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          prop="publishState"
          label="操作"
          width="200">
          <template slot-scope="scope">
          <el-col :span="5">
            <el-button
             @click="previewfn(scope.row)"
             type="text" size="small"
              >预览</el-button>
          </el-col>
          <el-col :span="5">
            <el-button
              type="text"
              size="small"
              @click="to_examine(scope.row)"
              :disabled="scope.row.chkState !== 0"
              >审核</el-button>
          </el-col>
          <el-col :span="5">
            <el-button
              @click="handle(scope.row)"
              type="text"
              size="small"
              :disabled="scope.row.publishState === 0"
              >修改</el-button>
          </el-col>
          <el-col :span="5">
            <el-button
              type="text"
              size="small"
              v-if="scope.row.publishState === 1"
              @click="open(scope.row)"
              >上架</el-button>
            <el-button
              type="text"
              size="small"
              v-if="scope.row.publishState === 0"
              @click="open(scope.row)"
              >下架</el-button>
          </el-col>
          <el-col :span="4">
            <el-button
              type="text"
              size="small"
              @click="dlelet(scope.row)"
              :disabled="scope.row.publishState === 0"
              >删除</el-button>
          </el-col>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next, sizes, jumper"
        :total="total"
        :current-page="1"
        :page-size="5"
        :page-sizes="[5, 10, 20, 50]"
        @size-change="size_change"
        @current-change="page_change"
        style="float: right; margin: 10px 0">
      </el-pagination>
    </el-card>
    <!-- 审核 -->
     <el-dialog
          :modal="false"
          title="提示"
          :visible.sync="elastic_layer"
          width="20%"
          :before-close="nohandleClose">
          <el-row :gutter="40">
            <el-col :span="5"
              ><div class="grid-content bg-purple">
                <el-radio v-model="audit_status" label="1">通过</el-radio>
                  </div></el-col>
                <el-col :span="19">
                  <div class="grid-content bg-purple">
                    <el-radio v-model="audit_status" label="2">拒绝</el-radio>
                  </div></el-col>
              </el-row>
              <el-row :gutter="40" style="margin-top: 30px">
                <el-col :span="24">
                  <div class="grid-content bg-purple">
                    <el-input
                      type="textarea"
                      :rows='sizeChange'
                      placeholder="请输入内容"
                      v-model="textarea">
                    </el-input>
                  </div>
                </el-col>
              </el-row>
              <el-row :gutter="40" style="margin-top: 30px">
                <el-col :span="24">
                  <div class="grid-content bg-purple" style="float:right;">
                    <el-button @click="noconfirmation">取消</el-button>
                    <el-button @click="confirmation" type="primary">确定</el-button>
                  </div>
                </el-col>
              </el-row>
      </el-dialog>
    <!-- 预览 -->
    <el-dialog
      :modal="false"
      title="提示"
      :visible.sync="dialogVisible"
      width="50%"
      height="100%"
      :before-close="handleClose">
      <el-row :gutter="20">
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【题型】：
            <span v-if="preview_obj.questionType === '1'">单选</span>
            <span v-else-if="preview_obj.questionType === '2'">多选</span>
            <span v-else>简答</span>
          </div>
        </el-col>
        <el-col :span="6">
          <div class="grid-content bg-purple">
            【编号】：{{ preview_obj.id }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【难度】：
            <span v-if="preview_obj.difficulty === '1'">简单</span>
            <span v-else-if="preview_obj.difficulty === '2'">一般</span>
            <span v-else>困难</span>
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【标签】：{{ preview_obj.tags }}
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20" style="margin-top:10px">
        <el-col :span="6"><div class="grid-content bg-purple">
            【学科】：{{ preview_obj.subjectName }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【目录】：{{ preview_obj.directoryName }}
          </div>
        </el-col>
        <el-col :span="6"><div class="grid-content bg-purple">
            【方向】：{{ preview_obj.direction }}
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="24"><div class="grid-content bg-purple">【题干】：</div></el-col>
        <el-col :span="24"><div class="grid-content bg-purple" style="color: blue" v-html="preview_obj.question"></div></el-col>
        <el-col :span="24"><div class="grid-content bg-purple">
            <span v-if="preview_obj.questionType === '1'">单选题 选项: (一下选中的选项为正确答案)</span>
            <span v-else-if="preview_obj.questionType === '2'">多选题 选项: (一下选中的选项为正确答案)</span>
            <span v-else>简答题 选项: (一下选中的选项为正确答案)</span>
          </div>
        </el-col>
        <el-col
          v-for="(itim, index) in preview_obj.options"
          :key="index"
          :span="24">
          <div class="grid-content bg-purple">
            <el-radio
              v-if="preview_obj.questionType !== '3'"
              v-model="radio"
              :label="itim.isRight"
              :disabled="radio !== itim.isRight">
              {{ itim.title }}
            </el-radio>
          </div>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="4"><div class="grid-content bg-purple">【参考答案】：</div></el-col>
        <el-col :span="18">
          <el-button
            style="position: absolute;left: 104px;top: -8px;"
            @click="myswitch(preview_obj)"
            type="danger">视频答案预览</el-button>
          </el-col>
      </el-row>
      <div v-if="hideen">
          <video
            class="videos"
            controls
            autoplay
            preload="auto"
            :src="video_id === preview_obj.id ? srcUrl : ''"></video>
        </div>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col>【答案解析】：<span style="display:inline-block;" v-html="preview_obj.answer"></span>
        </el-col>
      </el-row>
      <el-divider></el-divider>
      <el-row>
       <el-col :span="24">【题目备注】：<span v-html="preview_obj.remarks"></span
        ></el-col>
        <button class="mydivs" @click="handleClose">关闭</button>
      </el-row>
    </el-dialog>
  </div>
</template>
<script>
import { simple } from '@/api/hmmm/subjects'
import { provinces, citys } from '@/api/hmmm/citys'
import {
  choice,
  choicePublish,
  remove,
  detail,
  choiceCheck
} from '@/api/hmmm/questions'
import { direction } from '@/api/hmmm/constants'
import { simple as simpley } from '@/api/hmmm/directorys'
export default {
  data () {
    return {
      subject: null, // 学科
      // 按钮禁用
      btn: true,
      // 二级目录
      secondary_directory: null,
      // 标签
      labels: null,
      // 关键字
      activity_form: null,
      // 试题类型
      question_types: null,
      // 难度
      difficulty: null,
      // 方向
      direction: null,
      // 方向数组
      directions: '',
      // 录入人
      entered_by: null,
      // 题目备注
      topic_notes: null,
      // 企业名称
      name_of_enterprise: null,
      // 城市
      urban: null,
      // 区域
      area: null,
      // 学科数组
      subject_array: [],
      // 城市数组
      urban_array: [],
      // 城区数组
      area_array: [],
      // 面板分页
      tabname: ['全部', '待审核', '已审核', '已拒绝'],
      // 索引
      indexs: 0,
      // 页面渲染数组
      tabledata: [],
      // 页码
      page: 1,
      // 二级目录数组
      er_arr: [],
      // 页数
      pagesizes: 5,
      pages: {
        page: this.page,
        pagesize: this.pagesizes
      },
      total: 0, // 总条数
      checkedall: true, // 按钮状态
      dialogVisible: false, // 预览弹层
      radio: 1, // 预览的单选框
      preview_obj: {}, // 预览的对象
      hideen: false, // 预览的视频显示与隐藏
      elastic_layer: false, // 审核弹层
      audit_status: '1', // 审核的状态
      textarea: null, // 文本框
      parameter_auditp: null, // 审核需要传的参数
      examine_btn: false, // 审核的控制按钮
      pagination_index: null, // 分页索引
      secUrl: null, // 视频地址
      video_id: null,
      sizeChange: 3 // 审核输入框的大小
    }
  },
  // 最先执行一遍渲染城市选项框
  created () {
    // 数据传给方向数组
    this.directions = direction
    this.urban_array = provinces()
    this.request_function()
    this.search()
  },
  methods: {
    // 调用城市选项框对应的函数
    async request_function () {
      try {
        const { data: res } = await simple()
        this.subject_array = res
      } catch (err) {
        console.log(err)
        this.$message.success('失败')
      }
    },
    // 城区选项框的函数
    // async多余
    async change_fn () {
      this.area_array = citys(this.urban)
    },
    handleClick (tab, event) {
      console.log(tab, event)
    },
    // 分页
    change_class (index) {
      this.indexs = index
      // 创建分页索引
      const ind = index
      this.pagination_index = ind - 1 < 0 ? null : ind - 1
      this.search()
    },
    handle (row) {
      this.$router.push('/questions/new?id=' + row.id)
    },
    // 每页显示条数
    size_change (size) {
      this.pagesizes = size
      this.page = 1
      this.search()
    },
    // 请求查询的数据
    async search () {
      const alldata = {
        subjectID: this.subject,
        keyword: this.activity_form,
        chkState: this.pagination_index,
        page: this.page,
        pagesize: this.pagesizes
      }
      try {
      // 发送axios请求
        const { data: res } = await choice(alldata)
        console.log(res)
        this.tabledata = res.items
        // 调用字符串截取截取时间
        this.mydata(this.tabledata)
        this.total = res.counts
        // 总条数
        this.total = res.counts
      // this.removes()
      } catch (err) {
        console.log(err)
        this.$message.success('失败')
      }
    },
    // 截取时间字符串
    mydata (arrays) {
      arrays.forEach((itim, index) => {
        const date = itim.addDate.substring(0, 19).replace(/T/g, '-')
        arrays[index].addDate = date
      })
    },
    // 清空输入框内容
    removes () {
      this.subject = null
      this.secondary_directory = null
      this.activity_form = null
      this.question_types = null
      this.difficulty = null
      this.direction = null
      this.entered_by = null
      this.topic_notes = null
      this.name_of_enterprise = null
      this.urban = null
      this.area = null
    },
    // 弹窗上架
    open (val) {
      this.$confirm('确定要上架这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消'
      })
        .then(() => {
          const data = {
            publishState: val.publishState === 0 ? 1 : 0,
            id: val.id
          }
          // console.log(this.tabledata)
          this.upper_and_lower_shelves(data)
        })
        .catch(() => {})
    },
    // 删除
    dlelet (val) {
      this.$confirm('确定要删除这道题目吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await remove({ id: val.id })
          .then((res) => {
            this.search()
            this.$message.success('成功删除')
          })
          .catch((req) => {
            this.$message.success('删除失败')
          })
      })
    },
    page_change (val) {
      this.page = val
      this.search()
    },
    // 上下架
    async upper_and_lower_shelves (dataall) {
      await choicePublish(dataall)
      this.search()
    },
    // 监听二级目录
    async monitors (val) {
      try {
        console.log('jt', val)
        this.secondary_directory = null
        const { data: res } = await simpley({ subjectID: val })
        this.er_arr = res
        console.log('jt', res)
      } catch (err) {
        console.log(err)
        this.$message.success('失败')
      }
    },
    // 预览函数
    async previewfn (ind) {
      try {
      // 预览弹层的控制和显示
        this.dialogVisible = true
        const { data: res } = await detail({ id: ind.id })
        res.ifPlay = false
        this.preview_obj = res
      } catch (err) {
        console.log(err)
        this.$message.success('失败')
      }
    },
    // 预览弹层关闭
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          // 审核弹层
          // this.elastic_layer = true
          // 预览弹层
          this.dialogVisible = false
          // 关闭视频显示
          this.hideen = false
          // 暂停视频
          const myvdo = document.querySelector('.videos')
          myvdo.pause()
          done()
        })
        .catch((_) => {})
    },
    // 审核弹层关闭
    nohandleClose () {
      this.noconfirmation()
    },
    // 预览里视频的显示与隐藏
    myswitch (data) {
      this.srcUrl = data.videoURL
      this.video_id = data.id
      console.log(this.video_id)
      console.log(this.srcUrl)
      this.hideen = true
    },
    // 审核函数
    to_examine (val) {
      this.sizeChange = 3
      this.elastic_layer = true
      this.Parameter_audit = val
    },
    // 新增试题
    async new_questions () {
      this.$router.push('/questions/new')
    },
    // 点击审核弹窗的确定按钮
    async confirmation () {
      // 判断审核内容是否为空
      if (this.textarea == null) {
        this.$message.error('请输入审核内容')
        return
      }
      // 判断审核是否选中
      if (this.audit_status <= 0) {
        this.$message.error('请选择审核状态')
        return
      }
      const data = {
        id: this.Parameter_audit.id,
        chkState: Number(this.audit_status),
        chkRemarks: this.textarea
      }
      this.elastic_layer = false
      try {
        const { data: res } = await choiceCheck(data)
        this.search()
        this.textarea = null
        this.audit_status = '1'
        this.size_change = 2
        console.log(this.preview_obj)
        this.$message.success('审核成功')
        console.log(res)
      } catch (err) {
        console.log(err)
        this.sizeChange = 3
        this.$message.error('审核失败')
      }
    },
    // 点击审核弹窗的取消按钮
    noconfirmation () {
      this.sizeChange = 3
      this.elastic_layer = false
      this.textarea = null
      this.audit_status = '1'
    }
  }
}
</script>

<style scoped>

.btn {
  background: #fff;
  border: 0.5px solid silver;
  height: 38px;
  width: 85px;
  outline: none;
  font-size: 12px;
}
.blue {
  color: blue;
}
.mydiv {
  height: 30px;
  width: 100%;
  line-height: 30px;
  background: #f4f4f5;
  font-size: 14px;
  padding-left: 30px;
  margin-top: 20px;
}
.red {
  color: red;
  opacity: 0.5;
  font-size: 10px;
}
.buttons {
  background: #85ce61;
  width: 90px;
  height: 30px;
  float: right;
  border: none;
  outline: none;
  font-size: 10px;
  color: #f4f4f5;
}
.btns {
  text-align: center;
  width: 20px;
  height: 20px;
}
.videos {
  width: 400px;
  height: 260px;
  margin-top: 16px;
  outline: none;
}
.mydivs{
  width: 72px;
  height: 38px;
  float: right;
  background: #409EFF;
  outline: none;
  border: none;
  margin-top: 7px;
  color: #f4f4f5;
}
</style>
